<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <script>
      $(function() {
        var carousel = $(".carousel"),
          clickable = true,
          timer;

        // 自动轮播函数
        function autoRun() {
          timer = setInterval(function() {
            if (parseInt(carousel.css("left")) <= -1860) {
              carousel.css("left", "-930px");
            }
            animate(-1);
          }, 3000);
        }
        // 刚打开页面时执行
        autoRun();

        $(".leftArrow").click(function() {
          // 防止用户疯狂点击翻页
          if (clickable) {
            clickable = false;
            // 当展示的5张图片为最左边的五张图片同时还要向左翻页时，重置位置
            if (parseInt(carousel.css("left")) <= -1860) {
              carousel.css("left", "-930px");
            }
            animate(-1);
          }
        });

        $(".rightArrow").click(function() {
          // 防止用户疯狂点击翻页
          if (clickable) {
            clickable = false;
            // 当展示的是最右边5张图片还要向右 翻页时，重置位置
            if (parseInt(carousel.css("left")) >= 0) {
              carousel.css("left", "-930px");
            }
            animate(1);
          }
        });

        // 切换页面函数
        function animate(direction) {
          // 这里传入的参数表示翻页的方向
          // 这里的 186px 是一张图片的宽度，因为用户手动点击翻页是随时发生的
          // 因此必须在手动翻页时进行位置的调整
          var adjustment = parseInt(carousel.css("left")) % 186;

          if (direction === -1) {
            // 向左翻页
            carousel
              .stop()
              .animate(
                { left: "+=" + direction * (186 + adjustment) + "px" },
                1500
              );
          } else {
            // 向右翻页
            carousel
              .stop()
              .animate(
                { left: "+=" + direction * (186 - adjustment) + "px" },
                1500
              );
          }

          // 翻页的动画用时 1.5s， 为了保证‘安全’我将再次点击许可设置在了 2s 后
          // 虽然你可能会认为这个有点太简单暴力了。。我想这个地方用 Promise 来实现可能会优雅一点
          setTimeout(function() {
            clickable = true;
          }, 2000);
        }

        // 鼠标移入时清除自动轮播的定时器
        $(".pic").mouseenter(function() {
          clearInterval(timer);
          timer = null;
        });
        // 鼠标移出时开始自动轮播的定时器
        $(".pic").mouseleave(function() {
          autoRun();
        });
      });
    </script>
  </head>
  <body>
    <div class="pic">
      <ul class="carousel clear">
        <li>
          <a href="#"
            ><img src="./images/work/_pic1.jpg" width="100%" alt=""
          /></a>
        </li>
        <li>
          <a href="#"
            ><img src="./images/work/_pic2.jpg" width="100%" alt=""
          /></a>
        </li>
        <li>
          <a href="#"
            ><img src="./images/work/_pic3.jpg" width="100%" alt=""
          /></a>
        </li>
        <li>
          <a href="#"
            ><img src="./images/work/_pic4.jpg" width="100%" alt=""
          /></a>
        </li>
        <li>
          <a href="#"
            ><img src="./images/work/_pic5.jpg" width="100%" alt=""
          /></a>
        </li>

        <li>
          <a href="#"
            ><img src="./images/work/_pic1.jpg" width="100%" alt=""
          /></a>
        </li>
        <li>
          <a href="#"
            ><img src="./images/work/_pic2.jpg" width="100%" alt=""
          /></a>
        </li>
        <li>
          <a href="#"
            ><img src="./images/work/_pic3.jpg" width="100%" alt=""
          /></a>
        </li>
        <li>
          <a href="#"
            ><img src="./images/work/_pic4.jpg" width="100%" alt=""
          /></a>
        </li>
        <li>
          <a href="#"
            ><img src="./images/work/_pic5.jpg" width="100%" alt=""
          /></a>
        </li>

        <li>
          <a href="#"
            ><img src="./images/work/_pic1.jpg" width="100%" alt=""
          /></a>
        </li>
        <li>
          <a href="#"
            ><img src="./images/work/_pic2.jpg" width="100%" alt=""
          /></a>
        </li>
        <li>
          <a href="#"
            ><img src="./images/work/_pic3.jpg" width="100%" alt=""
          /></a>
        </li>
        <li>
          <a href="#"
            ><img src="./images/work/_pic4.jpg" width="100%" alt=""
          /></a>
        </li>
        <li>
          <a href="#"
            ><img src="./images/work/_pic5.jpg" width="100%" alt=""
          /></a>
        </li>
      </ul>
      <div class="leftArrow"></div>
      <div class="rightArrow"></div>
    </div>
  </body>
</html>
